import { TabBar } from "@arco-design/mobile-react";
import "./tabnav.less";
import {
  IconHome,
  IconSetting,
  IconNotice,
  IconStarFill,
  IconStar,
  IconUser,
  IconUserFill,
} from "@arco-design/mobile-react/esm/icon";
import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import tabLogo from "../../assets/tabbar-demo-img.png";
// DONE 导入创建action对象的方法
export default function TabBarDemo() {
  let navigate = useNavigate();
  let location = useLocation();
  //切换tabbar
  let toggleTabbar = (index) => {
    if (activeIndex === index) {
      return;
    }
    setActiveIndex(index);

    let path = tabbarData[index].path;
    navigate(path);
  };
  useEffect(() => {
    //查找当前激活的路径
    for (let i = 0; i < tabbarData.length; i++) {
      if (tabbarData[i].path === location.pathname) {
        setActiveIndex(i);
        break;
      }
    }
  }, []);
  const [activeIndex, setActiveIndex] = useState(0);
  const tabbarData = [
    {
      title: "推荐",
      icon: <IconHome />,
      path: "/",
    },
    {
      title: "更新",
      icon: (active) => (active ? <IconStarFill /> : <IconStar />),
      path: "/update",
    },

    {
      // title: (active) => (active ? "Your Notice" : "My Notice"),
      title: "书架",
      icon: <IconNotice />,
      path: "/Notice",
    },
    {
      title: "我的",
      icon: (active) => (active ? <IconUserFill /> : <IconUser />),
      path: "/my",
    },
  ];
  return (
    <TabBar
      activeCustomStyle={{ color: "#FF5722" }}
      dataSource={tabbarData}
      activeIndex={activeIndex}
      onChange={(index) => {
        toggleTabbar(index);
      }}
      fixed={true}
    ></TabBar>
  );
}
